<template>
	<tm-fullView>
		<tm-menubars title="键盘" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		
		<tm-sheet :shadow="24">
			<tm-input @click="test" disabled bg-color="grey-lighten-5" placeholder="点我输入" :border-bottom="false" title-class="text-weight-b text-blue" title="点击输入显示数字键盘" :vertical="true" v-model="word"></tm-input>
			<tm-keyborad @confirm="confirm"  model="number" :show.sync="show" v-model="word"></tm-keyborad>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<tm-input @click="show=true" disabled bg-color="grey-lighten-5" placeholder="点我输入" :border-bottom="false" title-class="text-weight-b text-blue" title="点击输入显示数字键盘" :vertical="true"  v-model="word"></tm-input>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<tm-button theme="bg-gradient-blue-accent" @click="show1=true">身份证键盘</tm-button> <tm-button @click="black=true;show1=true">暗黑模式</tm-button>
			<tm-keyborad :black="black" model="code" :show.sync="show1" v-model="word"></tm-keyborad>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<tm-button theme="bg-gradient-pink-accent" @click="show2=true">车牌键盘</tm-button>
			<tm-button theme="grey" @click="show3=true">密码键盘</tm-button>
		</tm-sheet>
		<tm-keyborad :black="black" model="car" :show.sync="show2" v-model="word"></tm-keyborad>
		<tm-keyborad :black="black" model="password" :show.sync="show3" v-model="word"></tm-keyborad>
		
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmKeyborad from "@/tm-vuetify/components/tm-keyborad/tm-keyborad.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmInput,tmButton,tmKeyborad},
		data() {
			return {
				word:'',
				show:true,
				show1:false,
				show2:false,
				show3:false,
				black:false
			}
		},
		methods: {
			test(){
				
				this.show=true
			},
			confirm(val){
				console.log(`我是输入的数据：${val}`);
			}
		}
	}
</script>

<style>

</style>
